<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在线课堂</title>
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
		<link rel="stylesheet" type="text/css" href="css/footer.css"/>
		<style>
			.lessons{
				width: 1226px;
				margin: 0 auto;
			}
			.lesson_name{
				width: 100%;
				margin-top: 45px;
				font-size: 16px;
				height: 30px;
				border-bottom: 1px solid gainsboro;
			}
			.lesson_name li{
				float: left;
				padding: 0px 10px;
				line-height: 28px;
				text-align: center;
				color: #808080;
				cursor: pointer;
			}
			.width_80{
				width: 80px;
			}
			.width_60{
				width: 60px;
			}
			.width_40{
				width: 40px;
			}
			.lesson_name li:hover {
				border-bottom: 3px solid #96d610;
				font-size: 18px;
				color: black;
			}
			.lesson_list {
				margin-top: 30px;
			}
			.lesson_list li {
				width: 258px;
				float: left;
				margin-right: 62px;
				margin-bottom: 50px;
				position: relative;
				border: 1px solid transparent;
				border-bottom: 1px solid gainsboro;
			}
			.lesson_list li:hover {
				border: 1px solid gainsboro;
				box-shadow: 0px 2px 5px gainsboro;
			}
			.lesson_list li:nth-child(4n){
				margin-right: 0px;
			}
			.lesson_list li .main_img{
				width: 100%;
			}
			.lesson_list li p{
				width: 90%;
				margin: 0 auto;
			}
			.lesson_list li p:first-of-type{
				margin: 10px auto 15px;
			}
			.lesson_list li .type1{
				background-color: #96d610;
				font-size: 14px;
				color: white;
				padding: 1px 25px;
				border-radius: 15px;
				float: right;
			}
			.lesson_list li .type2{
				background-color: #f79d95;
				font-size: 14px;
				color: white;
				padding: 1px 25px;
				border-radius: 15px;
				float: right;
			}
			
			.lesson_list li p:last-of-type{
				font-size: 14px;
				margin-bottom: 15px;
				color: #808080;
			}
			.lesson_list li p:last-of-type span {
				float: right;
			}
			.lesson_list li p:last-of-type span img{
				vertical-align: sub;
				cursor: pointer;
				margin-right: 5px;
			}
			.lesson_list li .icon_vip {
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
	</head>
	<body ng-app="">
		<div ng-include="'header.html'"></div>
	
		<div class="lessons">
			<ul class="lesson_name">
				<li class="width_80">全部课程</li>
				<li class="width_40">中风</li>
				<li class="width_60">脑肿瘤</li>
				<li class="width_40">中风</li>
				<li class="width_40">中风</li>
				<li class="width_60">脑肿瘤</li>
			</ul>
			<ul class="lesson_list">
				<li>
					<a href="javaScript:void(0)">
						<img class="main_img" src="img/placeholder.png" alt="" />
					</a>
					<p>宝宝爬行训练方法<span class="type1">讲课</span></p>
					<p>1.1万次播放<span><img src="img/zan.png" alt="" />10次</span></p>
					<img class="icon_vip" src="img/vip.png" alt="" />
				</li>
				<li>
					<a href="javaScript:void(0)">
						<img class="main_img" src="img/placeholder.png" alt="" />
					</a>
					<p>宝宝爬行训练方法<span class="type1">讲课</span></p>
					<p>1.1万次播放<span><img src="img/zan.png" alt="" />10次</span></p>
					<img class="icon_vip" src="img/vip.png" alt="" />
				</li>
				<li>
					<a href="javaScript:void(0)">
						<img class="main_img" src="img/placeholder.png" alt="" />
					</a>
					<p>宝宝爬行训练方法<span class="type2">讲课</span></p>
					<p>1.1万次播放<span><img src="img/zan.png" alt="" />10次</span></p>
					<img class="icon_vip" src="img/vip.png" alt="" />
				</li>
				<li>
					<a href="javaScript:void(0)">
						<img class="main_img" src="img/placeholder.png" alt="" />
					</a>
					<p>宝宝爬行训练方法<span class="type1">讲课</span></p>
					<p>1.1万次播放<span><img src="img/zan.png" alt="" />10次</span></p>
					<img class="icon_vip" src="img/vip.png" alt="" />
				</li>
				<li>
					<a href="javaScript:void(0)">
						<img class="main_img" src="img/placeholder.png" alt="" />
					</a>
					<p>宝宝爬行训练方法<span class="type1">讲课</span></p>
					<p>1.1万次播放<span><img src="img/zan.png" alt="" />10次</span></p>
					<img class="icon_vip" src="img/vip.png" alt="" />
				</li>
				
			</ul>
		</div>
		
		<div class="footer">
			<div class="footer_content">
				<dl>
				<dt>新手指南</dt>
				<dd><a href="javaScript:void(0)">中风康复课程介绍</a></dd>
				<dd><a href="javaScript:void(0)">儿童康复课程介绍</a></dd>
				<dd><a href="javaScript:void(0)">注册&登录</a></dd>
			</dl>
			<dl>
				<dt>关于课程</dt>
				<dd><a href="javaScript:void(0)">康复治疗师团队</a></dd>
				<dd><a href="javaScript:void(0)">速康智创居家康复工作室</a></dd>
				<dd><a href="javaScript:void(0)">远程指导课程介绍</a></dd>
			</dl>
			<dl>
				<dt>商务合作</dt>
				<dd><a href="javaScript:void(0)">加盟合作</a></dd>
				<dd><a href="javaScript:void(0)">应聘老师</a></dd>
				<dd><a href="javaScript:void(0)">加入我们</a></dd>
			</dl>
			<dl>
				<dt>网站声明</dt>
				<dd><a href="javaScript:void(0)">网站声明</a></dd>
				<dd><a href="javaScript:void(0)">帮助中心</a></dd>
				<dd><a href="javaScript:void(0)">意见反馈</a></dd>
			</dl>
			<dl>
				<dt>关于我们</dt>
				<dd><a href="javaScript:void(0)">联系我们</a></dd>
				<dd><a href="javaScript:void(0)">企业文化</a></dd>
			</dl>
			</div>
			<div class="copyright">
				<p>Powered by 速康智创 ©2014-2017</p>
				<p>课程内容版权均归 速康智创 所有 沪ICP备 16004547</p>
			</div>
		</div>
	</body>
	<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</html>
